﻿@model TopMenuModel
@using System.Text.RegularExpressions
@using Nop.Web.Models.Catalog;
@{
    var isRtl = this.ShouldUseRtlTheme();
}
@helper Bracket_Remover(string input)
{
        int index1 = input.IndexOf('(');
        string result = input.Remove(index1,1);

        index1 = result.IndexOf(')');
        result = result.Remove(index1,1);

        @Html.Raw(@result)



}
@helper RenderSubCategoryLine(CategorySimpleModel category, int level)
{
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            @category.Name
        &nbsp;<i class="fa fa-angle-down"></i>





    </a>
    <ul class="dropdown-menu">
        @foreach (var subCategory in  category.SubCategories)
            {
            @RenderCategoryLine(subCategory, level + 1)
            }
    </ul>

</li>
}

@helper RenderCategoryLine(CategorySimpleModel category, int level)
{
    if(category.SubCategories.Count > 0)
    {
        @RenderSubCategoryLine(category, 0)
    }
    else
    {
        <li>
            <a href="@Url.RouteUrl("Category", new { SeName = category.SeName })">
                @category.Name


        </a>
    </li>
    }
}


<!--Uncomment following lines to the 'End Marker' to add color picker-->
<!--<div class="theme-color-picker">
        <div id="configure-button" class="configure-button" data-expanded="false">
            <a href="#"><i class="fa fa-cog fa-2x"></i></a>

        </div>
        <div class="color-options" id="color-options">
            <h4>Preset Color</h4>
            <div class="options-choosing-palette">
                <ul>
                    <li><a href="#" rel="black" class="styleswitch black-picker"><img src="~/Themes/NopRoot/Content/images/black-picker.png"/></a></li>
                    <li><a href="#" rel="blue" class="styleswitch blue-picker"><img src="~/Themes/NopRoot/Content/images/blue-picker.png"/></a></li>
                </ul>
                <ul>
                    <li><a href="#" rel="red" class="styleswitch red-picker"><img src="~/Themes/NopRoot/Content/images/red-picker.png"/></a></li>
                    <li><a href="#" rel="green" class="styleswitch green-picker"><img src="~/Themes/NopRoot/Content/images/green-picker.png"/></a></li>




                </ul>

            </div>



        </div>
    </div>-->
<!--End Marker-->

<nav role="navigation" class="navbar navbar-inverse">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            @Html.Widget("header_menu_before")
            <li><a href="@Url.RouteUrl("HomePage")"><span class="glyphicon glyphicon-home"></span></a></li>
            
                @foreach (var category in Model.Categories)
                {
                    @RenderCategoryLine(category, 0)
                }

                @foreach (var topic in Model.Topics)
                 {
                     <li><a href="@Url.RouteUrl("Topic", new {SeName = topic.SeName})">@topic.Name</a></li>

                 }
            @if (Model.Categories.Count == 0 && Model.Topics.Count == 0)
            
            {
                //no categories to display?
                //in this cae let's diplay some default menu items
                <li><a href="@Url.RouteUrl("HomePage")">@T("HomePage")</a></li>
                if (Model.RecentlyAddedProductsEnabled)
                {
                    <li><a href="@Url.RouteUrl("RecentlyAddedProducts")">@T("Products.NewProducts")</a>
                    </li>
                }
                <li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a> </li>
                <li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
                if (Model.BlogEnabled)
                {
                    <li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
                }
                if (Model.ForumEnabled)
                {
                    <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
                }
                <li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
            }
            @Html.Widget("header_menu_after")
    </ul>
</div><!-- /.navbar-collapse -->
</nav>


<script type="text/javascript">
    $(function () {
        // Call stylesheet init so that all stylesheet changing functions
        // will work.
        $.stylesheetInit();

        // This code loops through the stylesheets when you click the link with
        // an ID of "toggler" below.
        $('#toggler').bind(
            'click',
            function (e) {
                $.stylesheetToggle();
                return false;
            }
        );

        // When one of the styleswitch links is clicked then switch the stylesheet to
        // the one matching the value of that links rel attribute.
        $('.styleswitch').bind(
            'click',
            function (e) {
                $.stylesheetSwitch(this.getAttribute('rel'));
                return false;
            }
        );


        $("#configure-button").on("click", function (e) {
            e.preventDefault();
            if ($(this).data("expanded") == "true") {
                $("#color-options").css({ right: '-140px' });
                $("#configure-button").css({ right: '0px' });
                $(this).data("expanded", "false");
            } else {
                $("#color-options").css({ right: '0px' });
                $("#configure-button").css({ right: '140px' });
                $(this).data("expanded", "true");
            }

        });


    });

</script>

